<template>
  <view>
    <view class="detail_box" v-for="(item, i) in detailList" :key="i">
      <!-- windows端不显示 -->
      <view class="win_hide" :style="hide">
        <!-- 返回首页模块 -->
        <view class="back_exchange" :style="equipStyle">
          <uni-icons type="back" :style="iconStyle" size="22" class="detail_icon" color="#FFF" @click="gotoExchange">
          </uni-icons>
        </view>
      </view>
      <view class="img">
        <image :src="item.pic" @click="getImage(item.pic)"></image>
      </view>
      <!-- 用户数据渲染 -->
      <view class="user_box">
        <view class="user_avatarImg">
          <image :src="userMessage.avatarUrl" mode=""></image>
        </view>
        <view class="user_nickName" v-if="userMessage.nickName">
          {{userMessage.nickName}}
        </view>
        <view class="user_gender" v-if="userMessage.gender.length !== 0">
          <image
            src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8638907f-6b78-40ed-8ab5-64a825c57ef1/b1995f00-7e71-48f6-9a9f-1ad9fb73f9e8.png"
            v-if="userMessage.gender == 0"></image>
          <image
            src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8638907f-6b78-40ed-8ab5-64a825c57ef1/42b519be-6dfe-4296-9631-fa4700ee97c3.png"
            v-else-if="userMessage.gender == 1"></image>
        </view>
      </view>
      <!-- 数据渲染 -->
      <view class="detail_data">
        <view class="detail_exchange">
          <view class="detail_manner">易物：<view class="manner.box">{{ item.manner }}</view>
          </view>
          <view class="description">{{ item.swap_description }}</view>
        </view>
        <view class="detail_exchange">
          <view class="detail_name">以物：<view class="name.box">{{ item.name }}</view>
          </view>
          <view class="description">{{ item.description }}</view>
        </view>
        <view class="detail_exchange">
          <view class="detail_place">交易地点：<view class="place.box">{{ item.place }}</view>
          </view>
        </view>
      </view>
      <!-- 底部模块 -->
      <view class="bottom">
        <view class="bottom_left">
          <uni-icons :type="hand" size="56rpx" color="#ff3232" @click="c_hand(item)"></uni-icons>
          <view class="support_num" v-if="support_num !== 0">
            {{support_num}}
          </view>
          <uni-icons :type="star" size="56rpx" color="#edfa1a" style="margin-left: 60rpx; !important;"
            @click="collection(item)"></uni-icons>
        </view>
        <view class="bottom_right">
          <uni-tag text="立即联系" circle="true"
            custom-style=" font-size=40rpx; font-weight: 600;background-color: #ea6b44; border: 1px solid #ea6b44; padding: 12rpx 55rpx; margin-left: 24rpx; border-radius: 100rpx !important"
            @click="gotoContact(item)"></uni-tag>
        </view>
      </view>
    </view>

    <view class="placeholder">
      <!-- 占位 -->
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        detailList: [],
        userMessage: [],
        hand: "hand-up",
        star: "star",
        hide: "",
        id: "",
        support_num: "",
        equipStyle: "",
        iconStyle: ""
      };
    },
    onLoad(options) {
      const id = options._id
      this.id = id
      this.getDetailList(id)
      this.handStatus(id)
      this.starStatus(id)
      this.getSupportNum()
      this.getEquipMessage()
    },
    methods: {
      getEquipMessage() {
        const menuStyle = uni.getMenuButtonBoundingClientRect()
        this.equipStyle = "top:" + menuStyle.top + "px;"
      },
      async getDetailList(id) {
        const res = await uniCloud.database().collection("jiayi-message").where({
          _id: id
        }).get()
        this.detailList = res.result.data
        uniCloud.callFunction({
          name: 'getUser',
          data: {
            openID: this.detailList[0].user_openid
          },
          success: (res) => {
            this.userMessage = res.result.data[0]
          }
        })
      },
      gotoExchange() {
        uni.navigateBack()
      },
      // 图片预览
      getImage(url) {
        uni.previewImage({
          urls: [url]
        })
      },
      // 点赞初始化
      handStatus(id) {
        const openid = uni.getStorageSync('jiayi_openid')
        if (openid) {
          uniCloud.callFunction({
            name: 'getUser',
            data: {
              openID: openid
            },
            success: (res) => {
              this.detailList.support = res.result.data[0].support
              if (this.detailList.support.indexOf(id) !== -1) {
                this.hand = "hand-up-filled"
              }
            }
          })
        }
      },
      // 点赞功能
      c_hand(item) {
        const openid = uni.getStorageSync('jiayi_openid')
        if (openid) {
          uniCloud.callFunction({
            name: 'getUser',
            data: {
              openID: openid
            },
            success: async (res) => {
              if (this.hand == "hand-up") {
                this.hand = "hand-up-filled"
                this.support_num++
                this.detailList.support = res.result.data[0].support
                // 商品的被点赞的数组
                const data = await uniCloud.database().collection('jiayi-message').doc(this.id).get()
                this.detailList.support_array = data.result.data[0].support_array
                if (this.detailList.support_array.indexOf(openid) == -1) {
                  this.detailList.support_array.push(openid)
                  uniCloud.database().collection('jiayi-message').doc(this.id).update({
                    support_array: this.detailList.support_array
                  })
                }
                // 用户点赞的数组
                if (this.detailList.support.indexOf(item._id) == -1) {
                  // 数组里不存在该条数据则增加
                  this.detailList.support.push(item._id)
                  uniCloud.callFunction({
                    name: 'updateUser',
                    data: {
                      support: this.detailList.support
                    }
                  })
                }
              } else {
                // 曲线点赞
                this.hand = "hand-up"
                this.support_num--
                // 操作商品被点赞的数组
                const data = await uniCloud.database().collection('jiayi-message').doc(this.id).get()
                this.detailList.support_array = data.result.data[0].support_array
                if (this.detailList.support_array.indexOf(openid) !== -1) {
                  this.detailList.support_array.splice(this.detailList.support_array.indexOf(openid), 1)
                  uniCloud.database().collection('jiayi-message').doc(this.id).update({
                    support_array: this.detailList.support_array
                  })
                }
                // 操作用户点赞的数组
                this.detailList.support = res.result.data[0].support
                if (this.detailList.support.indexOf(item._id) !== -1) {
                  this.detailList.support.splice(this.detailList.support.indexOf(item._id), 1)
                  uniCloud.callFunction({
                    name: 'updateUser',
                    data: {
                      support: this.detailList.support
                    }
                  })
                }
              }
            }
          })
        } else {
          uni.navigateTo({
            url: '/subpkg/login/login'
          })
        }
      },
      // 收藏初始化
      starStatus(id) {
        const openid = uni.getStorageSync('jiayi_openid')
        if (openid) {
          uniCloud.callFunction({
            name: 'getUser',
            data: {
              openID: openid
            },
            success: (res) => {
              this.detailList.collection = res.result.data[0].collection
              if (this.detailList.collection.indexOf(id) !== -1) {
                this.star = "star-filled"
              }
            }
          })
        }
      },
      // 收藏功能
      collection(item) {
        const openid = uni.getStorageSync('jiayi_openid')
        if (openid) {
          uniCloud.callFunction({
            name: 'getUser',
            data: {
              openID: openid
            },
            success: (res) => {
              if (this.star == "star") {
                this.star = "star-filled"
                this.detailList.collection = res.result.data[0].collection
                if (this.detailList.collection.indexOf(item._id) == -1) {
                  // 数组里不存在该条数据则增加
                  this.detailList.collection.push(item._id)
                  uniCloud.callFunction({
                    name: 'updateUser',
                    data: {
                      collection: this.detailList.collection
                    },
                    success: () => {
                      uni.showToast({
                        title: "收藏成功",
                        icon: "success",
                        duration: 1500
                      })
                    }
                  })
                }
              } else {
                this.star = "star"
                this.detailList.collection = res.result.data[0].collection
                if (this.detailList.collection.indexOf(item._id) !== -1) {
                  this.detailList.collection.splice(this.detailList.collection.indexOf(item._id), 1)
                  uniCloud.callFunction({
                    name: 'updateUser',
                    data: {
                      collection: this.detailList.collection
                    },
                    success: () => {
                      uni.showToast({
                        title: "取消收藏",
                        icon: "success",
                        duration: 1500
                      })
                    }
                  })
                }
              }
            }
          })
        } else {
          uni.navigateTo({
            url: '/subpkg/login/login'
          })
        }
      },
      gotoContact(item) {
        uni.navigateTo({
          url: '/subpkg/contact/contact?openid=' + item.user_openid
        })
      },
      async getSupportNum() {
        const data = await uniCloud.database().collection('jiayi-message').doc(this.id).get()
        this.support_num = data.result.data[0].support_array.length
      }
    }
  }
</script>

<style lang="scss">
  // 导航栏
  .detail_box {
    position: relative;

    .back_exchange {
      position: fixed;
      left: 10px;
      border-radius: 40rpx;
      background: rgba(0, 0, 0, 0.45);
      border: 1px soild rgba(255, 255, 255, 0.31);
      text-align: center;
      width: 46px;
      height: 30px;
      line-height: 30px;
    }

    // 照片

    image {
      width: 750rpx;
      height: 750rpx;
    }

    // 用户数据渲染
    .user_box {
      display: flex;
      margin: 20rpx 24rpx 0 28rpx;

      .user_avatarImg {
        width: 100rpx;
        height: 100rpx;
        border-radius: 100%;
        overflow: hidden;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .user_nickName {
        font-size: 32rpx;
        line-height: 90rpx;
        margin-left: 20rpx;
      }

      .user_gender {
        width: 40rpx;
        height: 40rpx;
        font-size: 32rpx;
        margin-top: 6rpx;
        line-height: 90rpx;
        margin-left: 10rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }

    // 数据渲染
    .detail_data {
      margin: 0 24rpx -4rpx 28rpx;

      .detail_exchange {
        background-color: #fff;
        border-radius: 10px;
        padding: 24rpx;
        margin-top: 18rpx;

        // 易物
        .detail_manner {
          display: flex;
          font-size: 30rpx;
          line-height: 40rpx;

          .manner.box {
            width: 85%;
            font-size: 40rpx;
            color: #C00000;
          }
        }

        // 以物
        .detail_name {
          display: flex;
          font-size: 30rpx;
          line-height: 38rpx;

          .name.box {
            width: 85%;
            font-size: 38rpx;
          }
        }

        .description {
          margin-top: 16rpx;
          font-size: 26rpx;
          line-height: 30rpx;
          color: #959595;
        }

        // 交易地点
        .detail_place {
          display: flex;
          font-size: 30rpx;

          .place.box {
            width: 75%;
            font-size: 30rpx;
          }
        }
      }
    }
  }

  // 底部模块
  .bottom {
    display: flex;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 80rpx;
    border-top: 1px solid #dcdcdc;
    background-color: #fff;
    z-index: 999;
    padding-bottom: env(safe-area-inset-bottom);
    .bottom_left {
      position: absolute;
      left: 60rpx;
      line-height: 80rpx;

      .support_num {
        position: absolute;
        bottom: 48rpx;
        left: 48rpx;
        width: 90rpx;
        height: 26rpx;
        line-height: 26rpx;
        font-size: 26rpx;
        background: linear-gradient(to bottom, #48ff66, #ff6dfd);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;

      }
    }

    .bottom_right {
      position: absolute;
      right: 60rpx;
      line-height: 80rpx;
    }
  }

  // 占位
  .placeholder {
    height: 100rpx;
  }
</style>
